<template>
	<view class="home">
		<custom-navbar title='园区引导' :show-back="true" @back="handleBack" />

		<view class="content" :style="{ paddingTop: navBarHeight + 'px' }">
			<view class="p30 policy">
				<view class="f36bc0 mb20" style="line-height: 50rpx;">{{guidanceDetail.guidance_title}}</view>
				<view class="f245c9 mb8">发布：{{guidanceDetail.issuing_unit}}</view>
				<view class="f245c9 mb28">发布时间：{{formatDate(guidanceDetail.create_time)}}</view>
				<mp-html :content="guidanceDetail.guidance_details" />
			</view>
		</view>
	</view>
</template>

<script setup>
	import CustomNavbar from '@/components/custom-navbar.vue'
	import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
	import {
		ref,
		onMounted,
		computed
	} from 'vue';
	import {
		getCurrentInstance
	} from 'vue'
	import {
		parkinfo
	} from '@/api/garden'

	// 获取全局cdn方法
	const {
		proxy
	} = getCurrentInstance()
	const cdn = (path) => proxy.$cdn + path

	// 获取系统信息
	const systemInfo = uni.getSystemInfoSync()
	const navBarHeight = computed(() => systemInfo.statusBarHeight + 44)

	// 页面标题
	const pageTitle = ref('园区引导详情')

	// 路由参数和响应式数据
	const guidance_id = ref('')
	const guidanceDetail = ref({
		guidance_title: '',
		issuing_unit: '',
		create_time: '',
		guidance_details: ''
	})

	// 初始化
	onMounted(() => {
		const pages = getCurrentPages()
		const currentPage = pages[pages.length - 1]
		const options = currentPage.options
		guidance_id.value = options.guidance_id || options.id

		if (guidance_id.value) {
			fetchGuidanceDetail()
		} else {
			uni.showToast({
				title: '缺少参数guidance_id',
				icon: 'none'
			})
			setTimeout(() => {
				uni.navigateBack()
			}, 1500)
		}
	})

	// 格式化日期
	const formatDate = (dateString) => {
		if (!dateString) return ''
		const date = new Date(dateString)
		return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
	}

	// 获取园区引导详情
	const fetchGuidanceDetail = async () => {
		try {
			uni.showLoading({
				title: '加载中...'
			})

			const params = {
				lang_code: 'zh',
				guidance_id: guidance_id.value
			}

			const res = await parkinfo(params)
			if (res.code === 200) {
				guidanceDetail.value = res.data.data
				// 更新页面标题
				pageTitle.value = guidanceDetail.value.guidance_title || '园区引导详情'
			} else {
				throw new Error(res.message || '获取详情失败')
			}
		} catch (error) {
			console.error('获取园区引导详情失败:', error)
			uni.showToast({
				title: error.message,
				icon: 'none'
			})
		} finally {
			uni.hideLoading()
		}
	}

	const handleBack = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.home {
		width: 100%;
		min-height: 100vh;
		overflow: hidden;
		background-color: #ffffff;

		.content {
			padding-top: calc(var(--status-bar-height) + 70rpx);
			height: 100%;
			display: flex;
			flex-direction: column;

			.policy {
				.f36bc0 {
					font-size: 36rpx;
					font-weight: bold;
					color: #000000;
				}

				.f245c9 {
					font-size: 24rpx;
					color: #999999;
				}

				.mb20 {
					margin-bottom: 20rpx;
				}

				.mb8 {
					margin-bottom: 8rpx;
				}

				.mb28 {
					margin-bottom: 28rpx;
				}
			}
		}
	}
</style>